import { View, Text } from "@tarojs/components";
import { observer } from "mobx-react";
import React, { Fragment, useState } from "react";
import { XmIcon } from "@/components/ui";
import { Router } from "@/path/router";
import Button from "@taroify/core/button/button";
import Navbar from "@/components/ui/navbar";
import { userStore } from "@/store";
import { XmImage } from "@/components/tool";
import { useDidShow } from "@tarojs/taro";
import "./index.scss"
function Index() {
  const [userInfo,setUserInfo] = useState(0)
  useDidShow(()=>{
    setUserInfo(userStore.userInfo.integral)
    userStore.refreshUserInfo()
  })
  return <>
    <View className="wallet-nav">
      <Navbar showIcon={true} titleClassName="wallet-nav-title" title={'积分钱包'} />
    </View>
    <View className="wallet">
      <View className="wallet-tip">
        <Text>我的钱包</Text>
      </View>
      <View className="wallet-box">
        <View className="wallet-box-content">
          {/* <View className="wallet-box-text wallet-box-left">
            <Text>已实名</Text>
          </View> */}
          <View className="wallet-box-imgbox">
            <XmImage src={userStore.userInfo.avatar} className="wallet-box-img" static/>
          </View>
          <View className="wallet-box-text wallet-box-right">
            <XmIcon icon={"anquanbaozhangzhong"} size={46} />
          </View>
          <View className="wallet-box-text wallet-box-text-line">
            <Text>安全保障中</Text>
          </View>
          <View className="wallet-box-bottom">
            <View className="wallet-box-title">我的积分余额：</View>
            <View className="wallet-box-credit">{userInfo}</View>
            <View className="wallet-box-list" onClick={()=>Router.toWalletList()}>账单明细</View>
            <View className="wallet-box-btn">
              <Button color="primary" onClick={()=>Router.toWalletPay()} shape="round" block>积分充值</Button>
            </View>
          </View>
        </View>
      </View>
    </View>
  </>
}

const Higher = React.memo(observer(Index));
export default () => <Fragment><Higher /></Fragment>
